<!doctype html>
<script src="../../resources/js-test.js"></script>
<style>
#left {
  position: absolute;
  top: 0;
  left: 0;
}
#right {
  position: absolute;
  top: 0;
  left: 200px;
}
#button {
  margin: 0;
  width: 50px;
  height: 50px;
}
#button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: rgba(0, 255, 0, 0.3);
}
#div {
  margin: 0;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}
#div:before {
  content: 'BEFORE';
  display: table-cell;
  will-change: position;
  padding: 25px;
  background: rgba(0, 255, 0, 0.3);
}
#console {
  position: absolute;
  top: 200px;
}
</style>

<div id='left'>
  <button id='button'>Button Test</button>
</div>
<div id='right'>
  <div id='div'>Div Test</div>
</div>

<div id='console'></div>

<script>
shouldBe('document.elementFromPoint(25, 25).id', "'button'");
shouldBe('document.elementFromPoint(225, 25).id', "'div'");
</script>
